<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </head>
  <body class="container">
  <%if(logined){%>
    <a href="javascript:;" data-toggle="modal" data-target="#myModal">添加</a>&nbsp;&nbsp;
    <a href="/logout">退出</a>
    <%}else{%>
    <a href="javascript:;" data-toggle="modal" data-target="#loginDialog">登陆</a>
    <%}%>
    <ul class="list-group">
    <% list.forEach(function(item, index){%>
     <li class="list-group-item">
     <%= item.name %>
     <%if(logined){%>
     <a href="/del?index=<%=index%>">删除</a>
     <a href="#" onclick="edit(<%=index%>)" data-toggle="modal" data-target="#myModal2">修改</a>
     <%}%>
     </li>
     <%})%>
    </ul>

    <form action="/add" method="post">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">添加名称</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body">
          <div class="form-group">
            <label for="exampleAdd">名称</label>
            <input type="text" name="name" class="form-control" placeholder="添加" id="exampleAdd"/>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <input type="submit" class="btn btn-primary">
          </div>
        </div>
      </div>
    </div>
    </form>

    <form action="/update" method="post">
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">修改名称</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body">
          <div class="form-group">
            <input type="hidden" name="index" id="updateIndex"/>
            <label for="exampleUpdate">名称</label>
            <input type="text" name="name" class="form-control" placeholder="更改" id="exampleUpdate"/>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <input type="submit" class="btn btn-primary">
          </div>
        </div>
      </div>
    </div>
    </form>

<form action="/login" id="loginDialogForm" method="post">
  <div class="modal fade" id="loginDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">登陆</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
        <div class="form-group">
          <label for="loginname">登录名</label>
          <input type="text" name="loginname" class="form-control" placeholder="loginname" id="loginname"/>
          </div>
          <div class="form-group">
                    <label for="password">密码</label>
                    <input type="text" name="password" class="form-control" placeholder="password" id="password"/>
        </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <input type="submit" class="btn btn-primary" value="登陆">
        </div>
      </div>
    </div>
  </div>
  </form>

    <script>
        function edit(index) {
            $.get('/get/'+index, function(result){
                $("#updateIndex")[0].value = index;
                $("#exampleUpdate")[0].value = result.name;
            })
        }

        $('#loginDialogForm')[0].onsubmit = function (event){
            event.preventDefault();
            $.post('/login', {loginname: $('#loginname')[0].value, password: $('#password')[0].value}, function(result){
                if(result === 'success'){
                    window.location.reload();
                }else{
                    alert('login error!');
                }
            });
            return false;
        }
    </script>
  </body>
</html>